<template>
  <div>
    <div class="all">
      <el-tree
        :data="treeList"
        :props="treeProps"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
      ></el-tree>
      <div class="flex">
        <el-button>清空</el-button>
        <el-button type="primary" @click="clickHandle">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { treeListApi, roleListMenuApi } from "./api/api";
const route = useRoute();
const treeProps = {
  children: "children",
  label: "title",
};
const checkedKeys: number[] = [];
const defaultCheckedKeys = ref(checkedKeys);
const treeList = ref<ItreeMenu[]>([]);
if (route.query.id) {
  Promise.all([
    treeListApi(),
    roleListMenuApi(parseInt(route.query.id as string)),
  ]).then((res) => {
    treeList.value = res[0].data;
    res[1].data.forEach((item) => {
      const pp = treeList.value.find((pp) => pp.id === item.parentId);
      pp && checkedKeys.push(item.id);
    });
  });
}

const clickHandle = () => {
  console.log(defaultCheckedKeys.value);
};
</script>

<style scoped>
.all {
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.flex {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>
